<template>
    <el-form>
        <el-input v-model="search.name" style="width: 120px;" clearable></el-input>
        <el-button @click="GetRoles">查询</el-button>
    </el-form>
    <el-table :data="roles" style="width: 100%">
        <el-table-column prop="roleName" label="角色名称" />
        <el-table-column prop="roleDesc" label="编码" />
        <el-table-column prop="roleRemark" label="备注" />
        <el-table-column prop="addTime" label="创建时间">
            <template #default="scope">
                {{ scope.row.addTime.replace('T', " ").substring(0, 16) }}
            </template>
        </el-table-column>
        <el-table-column prop="roleId" label="操作">
            <template #default="scope">
                <el-button link type="primary" @click="Edit(scope.row)">编辑</el-button>
                <el-button link type="danger" @click="Delete(scope.row)">删除</el-button>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        更多
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handelmeun(scope.row.roleId)">数据权限</el-dropdown-item>
                            <el-dropdown-item @click="handeluser(scope.row.roleId)">分配用户</el-dropdown-item>

                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </el-table-column>
    </el-table>
    <div>
        <el-pagination v-model:current-page="search.pageindex" v-model:page-size="search.pagesize"
            :page-sizes="[3, 5, 8, 10]" :size="size" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="search.totalcount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <div>
        <!-- 分配权限 -->
        <el-dialog v-model="dialogVisible" title="分配权限" width="500">
            <span>
                <el-tree ref="treeRef" node-key="value" show-checkbox :default-expand-all="true"
                    :default-checked-keys="checkmeunlist" style="max-width: 600px" :data="meuns" :props="defaultProps"
                    @check-change="handleNodeClick" />

                <el-button @click="RoleMeunAdd">添加</el-button>
            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>

                </div>
            </template>
        </el-dialog>
    </div>
    <div>
        <!-- 分配用户 -->
        <el-dialog v-model="dialogVisible1" title="分配用户" width="500">
            <span>

                <el-table :data="users" @selection-change="handelSelect">

                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="usersId" label="用户ID" />
                    <el-table-column prop="loginName" label="用户名" />
                    <el-table-column prop="userName" label="姓名" />
                    <el-table-column prop="userSex" label="性别">
                        <template #default="scope">
                            <el-tag v-if="scope.row.userSex == 1" type="success">男</el-tag>
                            <el-tag v-else type="danger">女</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="userPhone" label="手机号" />
                    <el-table-column prop="state" label="状态">
                        <template #default="scope">
                            <el-tag v-if="scope.row.state == 1" type="success">正常</el-tag>
                            <el-tag v-else type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="addTime" label="创建时间">
                        <template #default="scope">
                            {{ scope.row.addTime.replace('T', " ").substring(0, 16) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="usersId" label="操作">
                        <template #default="scope">
                            <el-button link type="primary"> 编辑</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <el-button @click="RoleUserAdd">分配用户</el-button>

            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取消</el-button>

                </div>
            </template>
        </el-dialog>
    </div>

</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'
import { type AxiosStatic } from 'axios'


const treeRef = ref([])
const axios = inject('axios') as AxiosStatic
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const router = useRouter()
const route = useRoute()
onMounted(() => {
    GetRoles()
})
//角色显示
const roles = ref([])
//条件查询
//  pageindex,  pagesize)list.totalcount,
//list.pagecount,
const search = ref({
    name: '',
    pageindex: 1,
    pagesize: 3,
    totalcount: 1,
    pagecount: 1,

})
const GetRoles = () => {
    axios.get('/RbacMan/GetRoles', {
        params: {

            name: search.value.name || "",
            pageindex: search.value.pageindex,
            pagesize: search.value.pagesize,
        }
    }

    ).then(res => {
        roles.value = res.data.list
        search.value.totalcount = res.data.totalcount
        search.value.pagecount = res.data.pagecount
    })
}
//分页跳转
const handleSizeChange = (val: number) => {

    search.value.pagesize = val
    GetRoles()
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {

    search.value.pageindex = val
    GetRoles()
    console.log(`current page: ${val}`)
}

//分配角色菜单表菜单
const handelmeun = (roleId: any) => {

    dialogVisible.value = true
    rolemeun.value.roleId = roleId
    checkmeun.value.roleid = roleId
    GetRoleMeuns()
    GetMeunCaseader()
}
//菜单树形显示
const meuns = ref([])
const GetMeunCaseader = () => {
    axios.get('/RbacMan/GetMeunCaseader', {
        params: {

            pid: 0
        }
    }).then(res => {
        meuns.value = res.data
    })
}
//菜单树形选中
const selectmeun = ref([])
const handleNodeClick = (data: any) => {
    console.log(data)
    selectmeun.value = treeRef.value!.getCheckedKeys(false)
}
const defaultProps = {
    children: 'children',
    label: 'label',
    value: 'value',
    labelUrl: "labelUrl",
}
//角色菜单表添加
const rolemeun = ref({
    "roleId": 0,
    "meunIdList": []
})
//反填角色的菜单信息
const checkmeun = ref({
    roleid: ''
})
const checkmeunlist = ref([])
const GetRoleMeuns = () => {

    axios.get('/RbacMan/GetRoleMeuns', {
        params: {
            roleid: checkmeun.value.roleid
        }
    }

    ).then(res => {
        res.data.forEach(item => {
            checkmeunlist.value.push(item.meunId)
        });

    })
}
//添加角色菜单表
const RoleMeunAdd = () => {
    rolemeun.value.meunIdList =
        selectmeun.value
    console.log(rolemeun.value)
    axios.post('/RbacMan/RoleMeunAdd', rolemeun.value

    ).then(res => {
        console.log(res)

        if (res.data > 0) {
            ElMessage.success('分配成功')
            dialogVisible.value = false
        } else {

            ElMessage.error('分配失败')
            return;
        }
        GetRoles()
    })
}
////////////分配用户
const handeluser = (roleId: any) => {
    dialogVisible1.value = true
    checkuser.value.roleid = roleId
    roleusers.value.roleId = roleId

    GetUsers()
    GetRoleUser()
}
//用户信息显示
const users = ref([])

const GetUsers = () => {
    axios.get('/RbacMan/GetUsers'

    ).then(res => {
        users.value = res.data
    })
}
///用户复选框选中信息
const selectuser = ref([])
const selectuserList = ref([])

const handelSelect = (data: any) => {
    console.log(data)
    selectuser.value = data
    selectuserList.value = []
    //selectuser.value = data
    selectuser.value.forEach(item => {
        selectuserList.value.push(item.usersId
        )
    });
    console.log(selectuserList.value)
}
//反填已经分配的用户信息 GetRoleUser
const checkuser = ref({
    roleid: 0
})
const checkuserlist = ref([])
const GetRoleUser = () => {
    axios.get('/RbacMan/GetRoleUser', {
        params: {
            roleid: checkuser.value.roleid
        }
    }

    ).then(res => {
        console.log(res.data)
        res.data.forEach(item => {
            checkuserlist.value.push(item.usersId)
        });
        console.log(checkuserlist.value)

        GetUsers()
    })
}



//添加角色用户表
const roleusers = ref({
    "roleId": 0,
    "usersIdList": []
})
const RoleUserAdd = () => {
    roleusers.value.usersIdList =
        selectuserList.value
    console.log(roleusers.value)
    axios.post('/RbacMan/RoleUserAdd', roleusers.value

    ).then(res => {
        console.log(res)

        if (res.data > 0) {
            ElMessage.success('分配成功')
            dialogVisible.value = false
        } else {

            ElMessage.error('分配失败')
            return;
        }
        GetRoles()
    })


}
</script>


<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: blue;
    display: flex;
    align-items: center;
}
</style>